import React, { useState, useEffect } from 'react';
import  {connect}  from 'react-redux';
import '../statepage/statepage.css'
const StatePage: React.FC = (props: any) => {
  const [list,setList] = useState<Array<{value: string}>>([])
  function addlist () {
    props.addlist()
  }
  function clear() {
   
  }
  function getList () {
     
  
  }
  return (
   <div>
     <p>react-redux</p>
     <button onClick={()=>getList()}>请求saga数据</button>
     <button onClick={()=>addlist()}>添加数据</button>
     <button onClick={()=>clear()}>清空列表</button>
     <div className='list-content'>
        {
            props.list.map((item: any,index: number)=>{
              return <p key={index}>{index+1}.{item.value}</p>
            })
          }
     </div>
     
   </div>
  );
};
const mapStateToProps = (state: any, ownProps: any) => {
    return {
        list: state.list
    }
}
const mapDispatchToProps = (dispatch: any) => {
    return {
        addlist: () => {
            dispatch({
                type: 'addList',
                value: {value :'你好'+Math.random().toFixed(2)}
            })
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(StatePage) 